<template>
    <div class="main">
        <div class="top_box">
            <el-button type="warning" icon="el-icon-plus" size="small" @click="addTimu">添加题目</el-button>
        </div>
        <el-table :data="data" style="width: 100%" border height="100%">
            <el-table-column prop="name" label="题目标题">
            </el-table-column>
            <!-- <el-table-column prop="type_name" label="题目大类">
            </el-table-column> -->
            <el-table-column prop="cate_name" label="题目类型" width="370">
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="50">
            </el-table-column>
            <el-table-column prop="address" label="创建时间" width="130">
                <template slot-scope="{row}">
                    {{ comTime(row.create_time) }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="{ row }">
                    <!-- <el-button type="warning" @click="edit(row)">修改</el-button> -->
                    <el-button type="warning" @click="showDetails(row)">查看</el-button>

                    <el-button type="danger" @click="remove(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表单 -->
        <el-dialog :visible.sync="dialogVisible" :title="formTitle" append-to-body width="900px" @close="formReset" :close-on-click-modal="false">
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-row type="flex" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="题目名称" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="题目分类" prop="admin_id">
                            <el-select v-model="form.cate_id" placeholder="请选择题目类型">
                                <el-option v-for="item in timuType" :key="item.id" :label="item.name" :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="题目选项">
                            <el-button type="success" @click="addOption">增加选项</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-for="(item, index) in form.option" :key="index">
                        <el-form-item :label="'选项' + (index + 1)" :prop="'option.' + index + '.option_name'" :rules="{
                                required: true, message: '内容不能为空', trigger: 'blur'
                            }">
                            <div style="display:flex">
                                <el-input v-model="item.option_name"></el-input>
                                <el-button type="warning" style="margin-left: 10px;" @click.prevent="removeOptio(item)">删除</el-button>
                                <el-button type="success" style="margin-left: 10px;" @click="addChild(item)">添加子选项</el-button>
                            </div>
                        </el-form-item>
                        <el-row v-for="(i,ind) in item.child" :key="ind">
                            <el-col :span="18">
                                <el-form-item label-width="160px" :label="'子选项' + (ind+ 1)" :prop="`option.${index}.child.${ind}.option_name`" :rules="{
                                required: true, message: '内容不能为空', trigger: 'blur'
                            }">
                                    <div style="display:flex">
                                        <el-input v-model="i.option_name">
                                        </el-input><el-button style="margin-left:10px" type="danger" @click="deleteChild(item,ind)">删除</el-button>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="是否需描述" label-width="100px">
                                    <el-switch v-model="i.is_desc" active-color="#13ce66" inactive-color="#ff4949">
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="13">
                        <el-form-item label="排序" prop="sort">
                            <el-input v-model="form.sort" placeholder="数值越大越靠前，默认数值100"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-button type="primary" @click="initiate()">发布</el-button>
                    <el-button @click="formReset()" type="primary">重置</el-button>
                </el-row>
            </el-form>
        </el-dialog>

        <!-- 详情 -->
        <el-dialog :visible.sync="dialogdetails" title="详情" append-to-body width="900px">
            <timuDetiles v-if="dialogdetails" :form="form" :timuType="timuType"></timuDetiles>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination class="main-pagination" :total="total" :current-page.sync="page" :page-size="limit" layout="prev, pager, next, jumper,total" @current-change="getInfo" hide-on-single-page></el-pagination>
    </div>
</template>

<script>
import {
    get, del, post
} from "@/assets/js/http.js";
export default {
    components: {
        "timuDetiles": () => import('./details.vue')
    },
    data() {
        return {
            formTitle: "添加题目",
            // 防抖变量
            a: 1,
            total: 0,
            limit: 20,
            page: 1,
            //  表格初始数据
            data: [],
            // 表单是否显示
            dialogVisible: false,
            timuType: [],
            form: {
                name: "",
                cate_id: "",
                option: [],
                sort: ""
            },
            rules: {
                name: [
                    { required: true, message: '请输入题目名称', trigger: 'blur' },
                ],
                cate_id: [
                    { required: true, message: '请选择题目类型', trigger: 'change' }
                ],
                sort: [
                    { required: true, message: '请输入排序数值', trigger: 'blur' },
                ],
            },
            dialogdetails: false
        }
    },
    methods: {
        // 请求初始数据
        getInfo(index = 1) {
            post({
                url: "/admin/answer.Subject/index",
                data: {
                    page: index,
                    limit: this.limit,
                },
                loading: true,
            }).then(res => {
                this.total = res.total          //总数
                this.data = res.data;
            })
        },
        // 请求题目分类列表
        getTopicClassification() {
            post({
                url: "/admin/answer.Subject/cate_index"
            }).then(res => {
                console.log(res);
                this.timuType = res.data
            })
        },
        // 添加题目
        addTimu() {
            this.formTitle = "添加题目"
            this.formReset()
            this.dialogVisible = true
        },
        // 表格编辑数据
        edit(row) {
            this.formTitle = "编辑题目"
            if (this.a == 0) return
            this.a = 0
            post({
                url: "/admin/answer.Subject/detail",
                data: { id: row.id }
            }).then(res => {
                let data = res.subject
                res.option.forEach(item => {
                    item.child.forEach(i => {
                        console.log(i);
                        i.is_desc = !!i.is_desc
                    })
                });
                data.option = res.option
                this.form = data
                this.dialogVisible = true
            }).finally(() => {
                this.a = 1
            })
            // this.form = row
            // this.dialogVisible = true
        },
        // 题目详情
        showDetails(row) {
            post({
                url: "/admin/answer.Subject/detail",
                data: { id: row.id }
            }).then(res => {
                let data = res.subject
                res.option.forEach(item => {
                    item.child.forEach(i => {
                        console.log(i);
                        i.is_desc = !!i.is_desc
                    })
                });
                data.option = res.option
                this.form = data
                this.dialogdetails = true

            })
        },
        // 表格删除数据
        remove(row) {
            this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                post({
                    url: "/admin/answer.Subject/del",
                    data: {
                        id: row.id
                    },
                    loading: true,
                    successTip: true,
                }).then(res => {
                    this.getInfo()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 表单中添加选项
        addOption() {
            this.form.option.push({
                option_name: '',
                child: []
            });
        },
        // 添加子选项
        addChild(item) {
            item.child.push(
                { option_name: '', is_desc: false }
            )
        },
        // 表单中删除选项
        removeOptio(item) {
            var index = this.form.option.indexOf(item)
            if (index !== -1) {
                this.form.option.splice(index, 1)
            }
        },
        // 刪除子選項
        deleteChild(item, ind) {
            console.log(item);
            console.log(ind);
            item.child.splice(ind, 1)
        },
        // 表单提交
        initiate() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    post({
                        url: "/admin/answer.Subject/edit",
                        data: this.form,
                        loading: true,
                        successTip: true,
                    }).finally(() => {
                        this.getInfo(this.page)
                        this.dialogVisible = false
                    })
                }
            });
        },
        // 表单关闭回调
        formReset() {
            this.form = Object.assign({}, this.$options.data().form)
        },
    },
    computed: {
        comTime() {
            return (tiem) => {
                const d = new Date(tiem * 1000);
                let nian = d.getFullYear();
                let yue = d.getMonth();
                let ri = d.getDate();
                return `${nian}-${yue + 1}-${ri}`;
            };
        },
    },
    mounted() {
        this.getInfo()
        this.getTopicClassification()
    },

}

</script>
<style></style>
